<template>
	<view class="content">
		<view class="header">
			<image @click="goindex()" class="logo" :src="_baseURL + setting.site_logo" mode=""></image>
			<view class="nologin" v-if="showinfonav">
				<view class="to-login" @click="gologin()">登录</view>
				<!-- <view class="com-btn" @click="goregister()">注册</view> -->
			</view>
			<view v-else class="after-login">
				<view class="balance">
					<image class="jinbi" src="../../static/img/jinbi.png" mode=""></image>
					<view class="yue">${{userinfo.money}}</view>
					<image @click="getrefresh()" class="shuaxin" :class="isrefresh ? 'ssssxuanzhuan':''" src="../../static/img/shuaxin.png" mode=""></image>
					<view class="qianbao">
						<image src="../../static/img/qianbao.png" mode=""></image>
					</view>
				</view>
				<view class="com-my" @click="gouserindex()">
					<image src="../../static/img/avatar.webp" mode=""></image>
				</view>
			</view>
		</view>
		<view class="tabber-wrapper">
			<view class="backNav">
				<view class="left" @click="back()">
					<image src="../../static/img/left.png" mode=""></image>
				</view>
				<view class="center">提现</view>
				<view class="right"></view>
			</view>
			<view class="con">
				<view class="wallet-address">
					<view class="top-box">
						<view class="tbleft">
							<image src="../../static/img/bizhong.png" mode=""></image>
							<view>(TRC) USDT加密货币</view>
						</view>
						<!-- <view class="tbright">更改</view> -->
					</view>
					<view class="add-box">
						<view class="text">您的钱包地址</view>
						<view class="add" @click="goaddadress()">添加地址</view>
					</view>
					<view class="select-box">
						<input type="text" v-model="bank_name" disabled="true" />
						<!-- <image @click="showoption = !showoption" src="../../static/img/xia.png" mode=""></image>
						<view class="selectoption" v-if="showoption">
							<view class="option"></view>
						</view> -->
					</view>
					<view class="add-box">
						<view class="text">提款金额</view>
						<view class="add">预计获得 {{shijijine}} USDT</view>
					</view>
					<view class="numbox">
						<input v-model="money" type="text" @input="jisuan()" :placeholder="'最低提款金额'+ setting.transfer_min +'U'" placeholder-style="color:#96a5b2;" />
						<view class="all" @click="all()">全部</view>
					</view>
					<view class="lable-text">账户余额</view>
					<view class="balancebox">
						<image src="../../static/img/bizhong.png" mode=""></image>
						<view>{{userinfo.money}}</view>
					</view>
					<view class="lable-text">提款密码</view>
					<view class="numbox" style="position: relative;">
						<input v-model="qk_pwd" :type="psdtype" placeholder="请输入提现密码" placeholder-style="color:#96a5b2;" />
						<image class="mimashowhide" v-if="showmima" @click="changemimashowhide()" src="../../static/img/mimahide.png" mode=""></image>
						<image class="mimashowhide" v-else @click="changemimashowhide()" src="../../static/img/mimashow.png" mode=""></image>
					</view>
					<view class="tips-box">
						<image src="../../static/img/jinggao.png" mode=""></image>
						<view>出于安全考虑，大额或可疑的提款可能需要1-6小时才能完成审核过程，请耐心等待!</view>
					</view>
					<view class="btn-box" @click="submit()">立即提款</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getuserinfo,drawing,sysconfig } from '../../api/api.js'
	import { baseURL } from '../../api/http.js'
	export default{
		data(){
			return{
				showinfonav:true,
				userinfo:[],
				isrefresh: false,
				setting:[],
				_baseURL: baseURL,
				
				showoption:false,
				bank_name:'',
				money:'',
				qk_pwd:'',
				
				showmima:true,
				psdtype:'password',
				
				shijijine:0
			}
		},
		onLoad() {
			if (uni.getStorageSync('userinfo')) {
				this.userinfo = JSON.parse(uni.getStorageSync('userinfo'))
			}
			if(uni.getStorageSync('token')){
				this.showinfonav = false
				this.getuserinfo()
			}
			this.getsysconfig()
		},
		methods:{
			jisuan(){
				let nummoney = Number(this.money)
				this.shijijine = (nummoney / this.setting.tx_usdt).toFixed(2)
			},
			changemimashowhide(){
				if(this.showmima){
					this.showmima = false
					this.psdtype = 'text'
				}else{
					this.showmima = true
					this.psdtype = 'password'
				}
			},
			goindex(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			goaddadress(){
				uni.navigateTo({
					url:'/pages/addCryptoAddr/index'
				})
			},
			getrefresh() {
				let that = this;
				this.isrefresh = true;
				setTimeout(function(){
					that.isrefresh = false;
				},1000)
				this.getuserinfo();
			},
			getuserinfo(){
				getuserinfo().then(res => {
					if(res.data.status.errorCode == 0){
						this.userinfo = res.data.data.member
						if(this.userinfo.usdt_address){
							this.bank_name = this.userinfo.usdt_address
						}
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getsysconfig(){
				sysconfig().then(res => {
					if(res.data.status.errorCode == 0){
						this.setting = res.data.data
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			back(){
				uni.navigateBack()
			},
			all(){
				this.money = this.userinfo.money
				this.jisuan()
			},
			submit(){
				if(this.bank_name == ''){
					uni.showToast({
						title: '请输入钱包地址',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.money == ''){
					uni.showToast({
						title: '请输入提款数量',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.qk_pwd == ''){
					uni.showToast({
						title: '请输入取款密码',
						icon:'error',
						duration: 2000
					});
					return false
				}
				let datas = {
					bank_name:this.bank_name,
					money:this.money,
					qk_pwd:this.qk_pwd,
					name:'',
					bank_card:''
				}
				drawing(datas).then(res => {
					if(res.data.status.errorCode == 0){
						uni.showToast({
							title: res.data.status.msg,
							icon:'success',
							duration: 2000,
							success() {
								uni.navigateTo({
									url:'/pages/transRecord/tixian'
								})
							}
						});
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			copy(value) {
			 	uni.setClipboardData({
			 	    data: value,
			    	success: function () {
						//调用方法成功
						uni.showToast({
							title:'复制成功',
							icon:'success',
							duration: 2000
						});
					}
			 	})
			},
			gologin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			goregister(){
				uni.navigateTo({
					url:'/pages/login/register'
				})
			},
			gouserindex(){
				uni.navigateTo({
					url:'/pages/user/index'
				})
			}
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	.content{
		width: 100%;
		min-height: 100vh;
		background: #212125;
	}
	.header{
		width: 100%;
		height: 112rpx;
		padding-right: 24rpx;
		padding-left: 39rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.logo{
		width: 100rpx;
		height: 80rpx;
	}
	.nologin,.after-login{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.to-login{
		word-break: break-all;
		text-align: center;
		font-weight: 700;
		margin-right: 40rpx;
		font-size: 26rpx;
		color: #fff;
		padding-top: 8rpx;
	}
	.com-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 204rpx;
		height: 64rpx;
		background: #fee619;
		box-shadow: 0 8rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
		border-radius: 12rpx;
		font-weight: 700;
		padding-top: 8rpx;
		font-size: 26rpx;
		color: #1c1e22;
		word-break: break-all;
		text-align: center;
	}
	.balance{
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-width: 160rpx;
		max-width: 400rpx;
		height: 70rpx;
		padding-left: 32rpx;
		background: #14161a;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.jinbi{
		width: 32rpx;
		height: 28rpx;
	}
	.yue{
		font-size: 30rpx;
		padding-left: 10rpx;
		font-weight: 600;
		color: #fff;
	}
	.shuaxin{
		width: 30rpx;
		height: 30rpx;
		margin-left: 22rpx;
		margin-right: 16rpx;
	}
	.ssssxuanzhuan {
		animation: rotatefresh 1s;
	}
	
	@keyframes rotatefresh {
		from {
			transform: rotate(0deg);
		}
	
		to {
			transform: rotate(360deg);
			transition: all 0.6s;
		}
	}
	.qianbao{
		width: 72rpx;
		height: 66rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fee619;
		box-shadow: 0 2rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
	}
	.qianbao image{
		width: 30rpx;
		height: 30rpx;
	}
	.com-my{
		width: 70rpx;
		height: 78rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30rpx;
		padding-top: 8rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.com-my image{
		width: 70rpx;
		height: 70rpx;
	}
	
	.tabber-wrapper{
		background: #202125;
		display: flex;
		flex-direction: column;
	}
	.backNav{
		height: 92rpx;
		background: #202125;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.left{
		width: 92rpx;
		line-height: 92rpx;
		height: 100%;
		padding-left: 32rpx;
	}
	.left image{
		width: 22rpx;
		height: 22rpx;
	}
	.center{
		flex: 1;
		text-align: center;
		color: #fff;
		font-weight: 900;
		font-size: 30rpx;
	}
	.right{
		width: 92rpx;
		line-height: 92rpx;
		height: 100%;
	}
	.con{
		position: relative;
	}
	.wallet-address{
		width: 100%;
		background: #24262a;
		padding: 24rpx 20rpx 40rpx 20rpx;
	}
	.top-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 112rpx;
		border-radius: 10rpx;
		background-color: #1a1c20;
		padding: 0 36rpx 0 24rpx;
		margin-bottom: 16rpx;
	}
	.tbleft{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.tbleft image{
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
	.tbleft view{
		font-weight: 600;
		color: #fff;
		font-size: 28rpx;
	}
	.tbright{
		font-weight: 700;
		color: #36ba73;
		font-size: 24rpx;
	}
	.add-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 26rpx 0 12rpx 4rpx;
	}
	.text{
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
	}
	.add{
		color: #36ba73;
		font-size: 24rpx;
	}
	.select-box{
		height: 96rpx;
		border-radius: 10rpx;
		padding: 19rpx 18rpx 19rpx 32rpx;
		background: #1a1c20 !important;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	.select-box input{
		flex: 1;
		border: 0;
		color: #fff;
		font-size: 28rpx;
	}
	.select-box image{
		width: 26rpx;
		height: 26rpx;
		margin: 0 16rpx;
	}
	.selectoption{
		position: absolute;
		z-index: 10;
		top: 98rpx;
		left: 0;
		width: 100%;
		background-color: #131417;
		border-radius: 10rpx;
	}
	.option{
		min-height: 70rpx;
		padding: 14rpx;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.lable-text{
		padding: 26rpx 0 12rpx 4rpx;
		color: #fff;
		font-size: 28rpx;
		font-weight: 700;
	}
	.numbox{
		height: 96rpx;
		padding: 6rpx 6rpx 6rpx 32rpx;
		border-radius: 10rpx;
		background-color: #1a1c20;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.numbox input{
		flex: 1;
		border: 0;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
	}
	.all{
		width: 100rpx;
		height: 84rpx;
		color: #97a6b4;
		border-radius: 10rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 24rpx;
		margin-left: 16rpx;
		background-color: #24262a;
	}
	.balancebox{
		height: 96rpx;
		padding: 20rpx 32rpx;
		background: #1a1c20 !important;
		border-radius: 10rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.balancebox image{
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
	.balancebox view{
		font-size: 32rpx;
		color: #fff;
		font-weight: 700;
	}
	.tips-box{
		color: #ffb018;
		margin-top: 20rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.tips-box image{
		width: 28rpx;
		height: 28rpx;
		margin: 0 10rpx;
	}
	.btn-box{
		width: 100%;
		height: 96rpx;
		border-radius: 12rpx;
		margin-top: 52rpx;
		background-color: #fee619;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #000;
		font-weight: 600;
		box-shadow: 0 8rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
	}
	.mimashowhide{
		width: 34rpx;
		height: 34rpx;
		padding: 0 16rpx;
		position: absolute;
		top: 50%;
		right: 16rpx;
		margin-top: -17rpx;
		box-sizing: content-box;
	}
</style>